<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Img Object-fit/position Demo</title>
	<style>
	img {
		width: 400px;
		height: 300px;
		background: yellowgreen;
		border: 5px solid #f90;
		transition: 1s width, 1s height;
		object-position: 50% 50%;
	}

	input[type="range"] {
		-webkit-appearance: none;
		width: 200px;
		height: 5px;
		border-radius: 5px;
		background: #ddd;
		outline: none;
	}
	</style>
</head>
<body>
	<div class="photo-box">
		<img src="img/lan.jpg" alt="">
		
		<h3>Object-fit:</h3>
		<div id="object-box">
			<label><input name="object-fit" type="radio" value="">无</label>
			<label><input name="object-fit" type="radio" value="fill">fill</label>
			<label><input name="object-fit" type="radio" value="contain">contain</label>
			<label><input name="object-fit" type="radio" value="cover">cover</label>
			<label><input name="object-fit" type="radio" value="none">none</label>
			<label><input name="object-fit" type="radio" value="scale-down">scale-down</label>
		</div>
		<p id="obj-fit-info"></p>
		<div id="obj-position-box">
			<h3>object-position: <span id="x">50%</span> <span id="y">50%</span></h3>
			<p>
				X:
				<input name="x" type="range" min="-100" max="100" value="50">
			</p>
			<p>
				Y:
				<input name="y" type="range" min="-100" max="100" value="50">
			</p>
			<small>* 您要选择了 object-fill 在使用此属性</small>
		</div>
	</div>
	<script>
	let objFitInfo = document.getElementById('obj-fit-info')
	let objfit = {
		'fill': '被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。',
		'contain': '被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。',
		'cover': '被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。',
		'none': '被替换的内容尺寸不会被改变。',
		'scale-down': '内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。',
	}
	document.getElementById('object-box').addEventListener('click', function(e) {
		if (e.target.tagName === 'INPUT') {
			document.querySelector('img').style.objectFit = e.target.value
			objFitInfo.innerHTML = objfit[e.target.value] || ''
		}
	}, false)

	document.getElementById('obj-position-box').addEventListener('mousemove', function(e) {

		if (e.target.tagName === 'INPUT') {
			// 取值
			let val = e.target.value;
			// 取类型，是x或y
			let id = e.target.name;
			let outVal = '';

			// 取原来的值
			let ele = document.querySelector('img');
			let objPosition = window.getComputedStyle(ele, null).objectPosition;

			let position = {
				x: objPosition.split(' ')[0],
				y: objPosition.split(' ')[1]
			}

			// 如果值没有变化不去改变
			if (val+'%' == position[id]) return;

			if (id == 'x') {
				outVal = val +'% '+ position.y;
			} else {
				outVal = position.x +' '+ val+'%'
			}

			ele.style.objectPosition = outVal;

			document.getElementById(id).innerHTML = val + '%';
		}
	}, false)

	</script>
</body>
</html>
